<template>
  <!-- 设置进入与退出的动画效果与动画耗时 -->
  <transition enter-active-class="animated slideInUp" leave-active-class="animated slideOutDown" :duration="400">
  <div class="page-deposite">
    <myHeader head-title="余额充值" go-back='true'></myHeader>
    <section class="content_container">
      <section class="content">
        <span class="content_header" v-if="!isMobile">{{browser}}</span>
        <header class="content_header">
          <span class="content_title_style">充值金额</span>
        </header>
        <!-- 最大5位整数,2位小数 -->
        <kbRmbInput inter="5" decimal="2" class="kbRmbInput" v-model="amtVal"></kbRmbInput>
        <div class="promit_button" @click="doPay" v-if="amtVal>0">下一步</div>
        <div class="unpromit_button" v-else>下一步</div>
      </section>
      <kbPay :isPay="isPay" @pas-end='pasEnd' @close='isPay=false'>
<!--         <div slot="loading-ani">
          <svg></svg>
        </div> -->
      </kbPay>
      <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
    </section>
  </div>
  </transition>
</template>

<script>
  import 'animate.css/animate.css'
  import {mapGetters} from 'vuex'
  import myHeader from '@/components/common/header/header'
  import alertTip from '@/components/common/alertTip'
  import kbRmbInput from '@/components/common/keyboard/kbRmbInput'
  import kbPay from '@/components/common/keyboard/kbPay'

  export default {
    data() {
      return {
        isPay: false,
        amtVal: 0.00,
        showAlert: false,      //显示提示组件
        alertText: null        //提示的内容
      }
    },
    components:{
      myHeader,
      alertTip,
      kbRmbInput,
      kbPay
    },
    computed: {
      isMobile: function() {  // 判断当前是否是移动端设备
        let flg = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
        if (!flg)
          console.log("isMobile no:", navigator.userAgent);
        return flg;
      },
      browser: function() {
        return navigator.userAgent;
      },
      acctBal: function() {
        return this.acctInf === null ? 0.00 : (this.acctInf.acctBal/100).toFixed(2);
      }
    },
    methods: {
      doPay() {
        this.isPay = true;
      },
      async pasEnd(val) {
        // setTimeout(() => { // 模拟请求接口验证密码中 ..
          if (val === '111111') { // 密码正确
            console.log("dispatch-getAcct:", this.$store.getters.user.loginName);
            // 同步调用后台接口
            await this.$store.dispatch('depositin', {
              "custId": this.$store.getters.user.loginName ? this.$store.getters.user.loginName : "13918831371", 
              "acctTpBiz": "C010",
              "odrAmt": this.amtVal*100,
              "subject": "alfredtest"});
            this.$router.replace({
              path: "/balance/txnret", 
              query: {odrAmt: this.amtVal, acctTpBiz: "C010", bizDesc: "充值"}});
          } else {
            this.showAlert = true;
            this.alertText = '密码验证失败';
            // this.$refs.pay.$payStatus(false)
          }
          this.isPay = false;
        // }, 500);
        // console.log("密码验证结束");
      },
      closeTip() {
        this.showAlert = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';
  .page-deposite {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .content_container{
      padding: .3rem;
      background-color: #fff;
      .content{
          padding: .4rem;
          background-color: #fff;
          border-radius: .15rem;
          .content_header{
              @include fj;
              font-size: .55rem;
              .contetn_description{
                  display: flex;
                  align-items: center;
                  img{
                      @include wh(.6rem, .6rem);
                      margin-right: .2rem;
                  }
                  .content_title_style{
                      color: $blue;
                  }
              }
              .content_title_style{
                  color: #666;
              }
          }
          .content_num{
              span:nth-of-type(1){
                  @include sc(1.8rem, #333);
              }
              span:nth-of-type(2){
                  @include sc(.7rem, #333);
              }
          }

      }
  }
  .kbRmbInput{
    @include wh(100%, 2rem);
    @include sc(1.2rem, #fff);
    border-radius: 0.1rem;
    line-height: 2rem;
    margin-top: 0.5rem;
    border:0.05rem solid #ccc;
    height: 2.5rem;
    padding:0.3rem;
  }
  .promit_button{
    @include wh(100%, 2rem);
    @include sc(.8rem, #fff);
    border-radius: 0.15rem;
    line-height: 2rem;
    margin-top: 1rem;
    text-align: center;
    background-color: $blue;
  }
  .unpromit_button{
    @include wh(100%, 2rem);
    @include sc(.8rem, #fff);
    border-radius: 0.15rem;
    line-height: 2rem;
    margin-top: 1rem;
    text-align: center;
    background-color: $lightblue;
  }
  .deal_detail{
      @include sc(.6rem, #999);
      line-height: 2rem;
      padding-left: .5rem;
  }
  .no_log{
      text-align: center;
      margin-top: 1rem;
      img{
          @include wh(8rem, 5rem);
      }
      p{
          margin-top: .5rem;
          @include sc(.7rem, #666);
      }
  }
  .router-slid-enter-active, .router-slid-leave-active {
      transition: all .4s;
  }
  .router-slid-enter, .router-slid-leave-active {
      transform: translate3d(2rem, 0, 0);
      opacity: 0;
  }
</style>